<template>
 <div id="hot">
  <div class="hotsing">
   <div class="yun_1">
    <!-- <img src="../../assets/img/hot.png" alt /> -->
   </div>
   <div class="yun_3">更新日期：{{ parseInt(this.shi) | formatDate}}</div>
  </div>
  <sing :list="list"></sing>
 </div>
</template>

<script>
import sing from "../../components/recommend/sing.vue";
export default {
 async mounted() {
  let res = await this._axios.get("/playlist/detail?id=3778678");
  this.list = res.data.playlist.tracks.slice(0,20);
  this.shi = res.data.playlist.updateTime
  let reb = await this._axios.get("/login/cellphone?phone=19173345807&password=zenglei123");
  console.log(reb);
 },
 data: () => {
  return {
   list: [],
   shi:''
  };
 },
 components: {
  sing,
 },
     filters: {
      
      formatDate: function (value) {
        let date = new Date(value);
        let MM = date.getMonth() + 1;
        MM = MM < 10 ? ('0' + MM) : MM;
        let d = date.getDate();
        d = d < 10 ? ('0' + d) : d;
        return  MM + '月' + d + '日';
      }
}
};
</script>

<style lang="scss" scoped>
#hot {
  margin-top: _vw(224);
 width: _vw(750);
 // background-color: #c1c1c1;
 .hotsing {
  width: 100%;
  height: _vw(290);
  background-color: pink;
  position: relative;
  font-size: 20px;
  background-image: url("https://s3.music.126.net/mobile-new/img/hot_music_bg_2x.jpg?f01a252389c26bcf016816242eaa6aee=");
  background-repeat: no-repeat;
  background-size: cover;
  .yun_1 {
    background: url(../../assets/img/hot1.png) no-repeat;
    background-size: 167px 97px;
    background-position: -24px -30px;
   width: _vw(284);
   height: _vw(135);
   position: absolute;
   top: 40px;
   left: 20px;
  //  img {
  //   background-size: cover;
  //   width: _vw(280);
  //   height: _vw(128);
  //  }
   .yun_p2 {
    font-size: 45px;
   }
  }
  .yun_3 {
   position: absolute;
   bottom: 20px;
   left: 20px;
   font-size: _vw(24);
   color: #fffffc;
  }
 }
 .content {
  width: 100%;
  height: _vw(110);
  // background-color: purple;
  display: flex;

  .content_num {
   // width: _vw(80);
   height: 100%;
   font-size: 25px;
   margin-top: 20px;
   margin-right: 20px;
   margin-left: 20px;
  }
  .content_text {
   margin-top: 10px;
   font-size: 25px;
   margin-left: -15px;
   .text2 {
    font-size: 18px;
   }
  }

  .content_bt {
   margin-top: 20px;
   margin-left: 320px;
  }
 }
}
</style>
